<template>
   <div class="join-form">
        <div class="container">
            <div class="formbg">
                <div class="bg-left">
                    <img src="@/assets/index/title1.png" alt="" class="title1">
                    <h1><span class="number">{{this.price}}</span><span class="yuan">元</span></h1>
                    <img src="@/assets/index/title2.png" alt="" class="title2">
                    <img class="btn1" src="@/assets/index/btn1.png" alt="">
                </div>
                <div class="bg-right">
                
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  name: 'JoinForm',
  data () {
    return {
      msg: 'index',
      timer: null,
      prices:['4980','16800','6400','11800','6420','7980','19800'],
      price:'',

    }
  },
   computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
   
    　  clearInterval(this.timer)
        this.setTimer()
  },
  distroyed: function () {

　　    clearInterval(this.timer)

    },
  methods: {

        setTimer(){
            var num = this.prices.length-1;
            this.timer = setInterval( () => {

                let randomNum =  Math.ceil(Math.random() * num);
                this.price = this.prices[randomNum]
                
    　　　　　　}, 100)
        }
   
  },
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
.join-form
    background #f0f1f2
.container
  container()   
  .formbg
    margin 21px 0
    width 100%
    overflow hidden
    background url('~@/assets/index/joinBg.png') no-repeat center center
    height 400px
.bg-left
    margin-left 133px
    float left
    width 556px
h1
    margin 59px 0
    .number
        margin-left 80px
        font-size 64px
        color #ec0101
        font-weight bolder
    .yuan
        margin-left 20px
        font-size 36px
        color #ec0101
.title1
    width 369px
    margin 33px auto 0 auto 
.title2
    width 384px
    margin 0 auto 
.btn1

    width 385px
    margin 20px auto 0 auto 
</style>
